<template>
  <div class="video-preview" :style="'height:'+videoboxheight+'px'">
    <div class="extension-video-item" v-for="(item,index) in videolist" :key="index">
      <!-- 上方图片 -->
      <div class="extension-top-img" :class="classname" @mousemove="extensionMove($event,index)" @mouseenter="extensionEnter(index)" @mouseleave="extensionLeave(index)" ref="extensionTopImg">
        <div class="topimg-box">
          <img class="extension-video-img" :src="item.img" alt="">
          <div class="extension-top-count">
            <div class="count-left">
              <span>
                <i class="iconfont icon-bofangliang"></i>
                 {{item.count1}}
              </span>
              <span>
                <i class="iconfont icon-dianzan"></i>
                {{item.count2}}
              </span>
            </div>
            <div class="count-right">
              <span>{{item.time}}</span>
            </div>
          </div>
          <i class="video-crown" :style="'background-image:url('+item.crown+')'" v-if="item.crown"></i>
          <!-- 动态背景图 -->
          <div class="extension-dynamic-bg" :style="'background-image:url('+item.bg+');background-position:-'+X*boxW+'px -'+Y*boxH+'px;'"
            ref="extensionDynamicBg">
            <div class="extension-dynamic-top">
              <span :style="'width:'+speedBar+'%'"></span>
            </div>
          </div>
          <!-- 弹幕 -->
          <div class="extension-danmu-content" ref="extensionDanmuContent">
            <span class="extension-danmu-item"  v-for="(items,indexs) in item.list" :key="indexs" ref="extensionDanmuItem">{{items}}</span>
          </div>
        </div>
        <div class="extension-video-Later" @mousemove="laterMove(index)" @mouseout="laterOut(index)">
          <i class="iconfont icon-shaohouzaikanx1"></i>
          <span class="extension-video-latertext">稍后再看</span>
        </div>
      </div>
      <!-- 标题 -->
      <p class="extension-video-title" :title="item.title">{{item.title}}</p>
      <!-- 文字信息 -->
      <div class="extension-upname" v-if="isShow">
        <i class="iconfont icon-UPzhu"></i>
        {{item.name}}
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    name:'VideoPreview',
    props:{
      videolist:Array,//数据
      classname:String,//父容器名
      videoboxheight:{
        type:String,
        required:false,
        default:'404'
      },//容器高度
      isShow:{
        type:Boolean,
        required:false,
        default:true
      }
    },
    data(){
      return{
        X: '',
        Y: '',
        boxW: '',
        boxH: '',
        speedBar: '',
        // extensionindex:0,
        timer:null,//定时器
        timenum:-1,//弹幕动画初始值
        extensionimgindex:0,//弹幕容器
      }
    },
    methods:{
      // 滑动预览效果
      extensionMove(e, index) {
        // 容器宽度
        let boxwidth = this.$refs.extensionTopImg[index].clientWidth
        //每份宽度
        let itemwidth = boxwidth / this.videolist[index].bgnum
        //要调用第几张图片 鼠标位置 除以 每份宽度
        let itemnum = Math.ceil(e.offsetX / itemwidth)
        //第几张图片 除以 10
        this.X = itemnum - 1 % 10
        this.Y = Math.ceil(itemnum / 10) - 1
        this.speedBar = Math.ceil(e.offsetX / boxwidth * 100)
      },
      // 移入滚动弹幕效果
      extensionEnter(index){
        this.extensionimgindex = index
        clearInterval(this.timer)
        this.timer = setInterval(()=>{
          jquery('.'+this.classname+'').eq(index).find('.extension-danmu-item').eq(this.timenum-1).removeAttr("style");
            this.timenum++
            if(this.timenum > this.videolist[index].list.length-1){
              this.timenum = 0
            }
            jquery('.'+this.classname+'').eq(index).find('.extension-danmu-item').eq(this.timenum).css({"left":"-100%","transition":"left "+(Math.random()*2+3).toFixed(3)+"s linear 0s"})
        },2000)
      },
      extensionLeave(index){
        clearInterval(this.timer)
        jquery('.video-top-img').eq(index).find('.extension-danmu-item').removeAttr("style");
      },
      // 稍后再看的移入效果
      laterMove(index) {
          this.$refs.extensionDynamicBg[index].classList.add('dynamicActive')
          this.$refs.extensionDanmuContent[index].classList.add('dynamicActive')
      },
      // 稍后再看的移出效果
      laterOut(index) {
        setTimeout(() => {
          this.$refs.extensionDynamicBg[index].classList.remove('dynamicActive')
          this.$refs.extensionDanmuContent[index].classList.remove('dynamicActive')
        },400)
      }
    },
    mounted() {
      this.boxW = this.$refs.extensionTopImg[0].clientWidth
      this.boxH = this.$refs.extensionTopImg[0].clientHeight
    },
    watch:{
      extensionimgindex(){
        this.timenum = -1
      }
    }
  }
</script>

<style scoped>
  .video-preview{
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 854px;
  }
  .extension-video-item {
    width: 206px;
    cursor: pointer;
    box-sizing: border-box;
  }

  .extension-top-img {
    position: relative;
    width: 100%;
    height: 116px;
  }

  .topimg-box {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .topimg-box::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 48px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .5));
    border-radius: 0 0 2px 2px;
  }

  .extension-video-img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
  }

  .extension-top-count {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    color: #fff;
    justify-content: space-between;
    width: 100%;
    padding: 6px 8px;
    box-sizing: border-box;
    line-height: 16px;
  }
  .count-left{
    display: flex;
    align-items: center;
  }
  .count-left i{
    vertical-align: middle;
    font-size: 14px;
  }
  .video-crown{
    position: absolute;
    width: 40px;
    height: 24px;
    left:0;
    top:0;
    background-size: contain;
  }

  .extension-video-title {
    font-size: 14px;
    line-height: 20px;
    margin: 10px 0 8px;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 500;
    padding-right: 12px;
    transition: color .3s;
  }

  .extension-dynamic-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
    border-radius: 2px;
    background-size: 2060px;
    /* transition: opacity .2s .2s; */
  }
  .extension-danmu-content{
    position: absolute;
    width: 100%;
    height:100%;
    left:0;
    top:0;
    pointer-events: none;
    overflow: hidden;
    transition: opacity .3s ;
    z-index: 20;
    opacity: 0;
  }
  .extension-danmu-item{
    position: absolute;
    color:#fff;
    white-space: pre;/*空白会被浏览器保留*/
    top: 8px;
    text-shadow: 1px 1px 2px #001;
    left: 100%;
    /* transition: left 4s linear; */
  }
  .extension-danmu-item:nth-child(even){
    top:28px;
  }

  .extension-dynamic-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    border-color: #000;
    border-style: solid;
    border-width: 4px 8px;
    background: #444;
    box-sizing: border-box;
  }

  .extension-dynamic-top>span {
    display: block;
    background: #fff;
    height: 2px;
    transition: width .1s;
  }

  .extension-upname {
    /* margin-top: 60px; */
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999;
    line-height: 16px;
  }

  .extension-upname>i {
    vertical-align: middle;
    margin-right: 4px;
  }

  .extension-video-Later {
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: rgba(0, 0, 0, .7);
    color: #fff;
    right: 8px;
    bottom: 8px;
    text-align: center;
    line-height: 28px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity .2s .2s;
    z-index: 20;
  }

  .extension-video-Later>i {
    font-size: 28px;
  }

  .extension-video-latertext {
    position: absolute;
    left: -19px;
    top: -28px;
    color: #FFFFFF;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, .8);
    line-height: 18px;
    z-index: 30;
    transform: scale(0);
    transition: all .2s;
  }

  .extension-top-img:hover .extension-video-Later {
    opacity: 1;
  }

  .extension-video-title:hover {
    color: #00A1D6;
  }

  .extension-top-img:hover .extension-top-count {
    /* display: none; */
  }

  .extension-top-img:hover .extension-dynamic-bg {
    opacity: 1;
  }

  .extension-video-Later:hover .extension-video-latertext {
    transform: scale(1);
  }

  .dynamicActive {
    opacity: 0 !important;
  }

  .extension-upname:hover{
    color:#00A1D6;
  }
  /* .extension-top-img:hover .extension-danmu-item{
    left: -100%;
  } */
  .extension-top-img:hover .extension-danmu-content{
    opacity: 1;
  }
</style>
